/**
 * 轮播图状态管理 Slice
 * 使用 Redux Toolkit 管理轮播图相关的状态
 * 包括当前活动索引、过渡动画状态和触摸位置的管理
 */

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

/**
 * 轮播图状态接口定义
 * @interface CarouselState
 * @property {number} activeIndex - 当前活动的轮播图索引
 * @property {boolean} transitionEnabled - 是否启用过渡动画
 * @property {number | null} touchPosition - 触摸位置，用于滑动切换
 */
interface CarouselState {
  activeIndex: number;
  transitionEnabled: boolean;
  touchPosition: number | null;
}

/**
 * 初始状态
 * 设置轮播图状态的默认值
 */
const initialState: CarouselState = {
  activeIndex: 0,
  transitionEnabled: true,
  touchPosition: null,
};

/**
 * 创建轮播图状态切片
 * 包含以下操作：
 * - setActiveIndex: 设置当前活动的轮播图索引
 * - setTransitionEnabled: 设置是否启用过渡动画
 * - setTouchPosition: 设置触摸位置
 */
const carouselSlice = createSlice({
  name: 'carousel',
  initialState,
  reducers: {
    /**
     * 设置当前活动的轮播图索引
     * @param state - 当前状态
     * @param action - 包含索引值的数字
     */
    setActiveIndex: (state, action: PayloadAction<number>) => {
      state.activeIndex = action.payload;
    },
    /**
     * 设置是否启用过渡动画
     * @param state - 当前状态
     * @param action - 包含是否启用过渡的布尔值
     */
    setTransitionEnabled: (state, action: PayloadAction<boolean>) => {
      state.transitionEnabled = action.payload;
    },
    /**
     * 设置触摸位置
     * 用于实现滑动切换功能
     * @param state - 当前状态
     * @param action - 包含触摸位置的数字或null
     */
    setTouchPosition: (state, action: PayloadAction<number | null>) => {
      state.touchPosition = action.payload;
    },
  },
});

// 导出 actions 和 reducer
export const { setActiveIndex, setTransitionEnabled, setTouchPosition } = carouselSlice.actions;
export default carouselSlice.reducer;